
{% assign spacing = section.settings.spacing %}
{% stylesheet %}
.block_image2 .block_image2_content {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.block_image2 .block_image2_content .image-two-item {
  flex: 1;
  position: relative;
}

.block_image2 .block_image2_content .image-two-item img {
  width: 100%;
  height: auto;
}
.block_image2 .block_image2_content .image-two-item .default_image_number{
  font-size:18px;
  color:#999;
  position: absolute;
  right:20px;
  bottom:14px;
}

@media screen and (max-width: 767px) {
  .block_image2 .block_image2_content {
    grid-column-gap: normal;
    justify-content: space-between;
  }
  .block_image2 .block_image2_content .image-two-item .default_image_number{
    right:8px;
    bottom:5px;
    font-size:14px;
  }
  .block_image2 .block_title{
     padding:0 15px;
  }
  .block_image2 .block_image2_content .image-two-item {
    flex: none;
    width: 100%;
    margin-bottom: {{ spacing }}px;
  }
  .block_image2 .full_container_wrapper{
    padding-left:0px;
    padding-right:0px;
  }
  #block_image2_{{ block_id | default : section.block_id }}  .block_image2_content .image-two-item {
    margin-bottom: {{ spacing }}px;
  }
}


{% endstylesheet %}
<div class="block_image2" id="block_image2_{{ block_id | default : section.block_id }}">
  <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
        {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
    </div>
    {% endif %}
    <div class="block_image2_content" style="grid-column-gap: {{ spacing }}px;">
      {% for block in section.blocks %}
      
       <a href="{% if block.image_link.url %}{{ block.image_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ block.image.src }}"  src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ block.image.alt }}" >
        {% if block.image.src =='' %} 
           <span class="default_image_number">Image-{{forloop.index}}</span>
        {% endif %} 
      </a>
      {% endfor %}

      {% comment %} <a href="{{section.settings.image_one_link.url | default : "javascript:;"}}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ section.settings.image_one.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_one.alt }}" >
        
      </a>
      <a href="{{section.settings.image_two_link.url | default : "javascript:;"}}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ section.settings.image_two.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_two.alt }}">
      </a> {% endcomment %}
    </div>
  </div>
</div>
{% schema %}
{
    "tag": "image2",
    "class": "block_image2",
    "is_global": false,
    "name": {
      "zh_CN": "单排图片"
    },
    "max_blocks": "5",
    "settings": [
    {
        "type": "card_header",
        "label": {
          "zh_CN": "设置"
        }
    },
    {
        "type": "card_input",
        "label": {
          "zh_CN": "标题"
        },
        "id": "title"
    },
      
    {
        "type": "card_text_editor",
        "label": {
          "zh_CN": "简短描述"
        },
        "id": "detail"
    },
    {
        "type": "card_switch",
        "label": {
          "zh_CN": "宽度铺满"
        },
        "id": "is_width_fill"
    },
    {
        "type": "card_input_number",
        "id": "spacing",
        "max": 200,
        "min": 0,
        "label":
        {
            "en_US": "Block spacing",
            "zh_CN": "间距"
        },
        "info":
        {
            "zh_CN": "内容宽度单位为px"
        }
    },
    {
        "type": "card_header",
        "label": {
          "zh_CN": "内容"
        }
    }
    ],
    "blocks": [
      {
        "name": {
          "zh_CN": "图片"
        },
        "type": "image-item",
        "settings": [
          {
        "type": "card_image",
        "label": {
          "zh_CN": "图片"
        },
        "default": {
          "src": "",
          "alt": ""
        },
        "info": {
          "zh_CN": "建议宽度1000px以上，高度自适应"
        },
        "id": "image"
      },{
        "type": "card_page_link",
        "label": {
          "zh_CN": "链接"
        },
        "default": {
          "type": "",
          "title": "",
          "url": ""
        },
        "id": "image_link"
      }]}
      
    ],
    "default": {
        "settings": {
            "title":"",
            "is_width_fill": false,
            "spacing":30,
            "padding":{
                "top": "20",
                "left": "0",
                "right": "0",
                "bottom": "20"
            }
        },
        "blocks": [{
            "block_type": "image-item",
            "image":{
                "src": "",
                "alt": ""
            },
            "image_link":{
                "type": "",
                "title": "",
                "url": ""
            }
        },
        {
        "block_type": "image-item",
            "image":{
              "src": "",
              "alt": ""
            },
            "image_link":{
              "type": "",
              "title": "",
              "url": ""
            }
        },
        {
        "block_type": "image-item",
            "image":{
              "src": "",
              "alt": ""
            },
            "image_link":{
              "type": "",
              "title": "",
              "url": ""
            }
        }]
    }
}
{% endschema %}